<template>
  <div>

    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>保单管理</el-breadcrumb-item>
      <el-breadcrumb-item>投保数据信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="queryinfo" ref="queryinfo" class="demo-form-inline">
        <el-form-item label="搜索内容">
          <el-input v-model="queryinfo.query" placeholder="搜索内容"></el-input>
        </el-form-item>

        <el-form-item label="险种">
          <el-select v-model="flagList" multiple placeholder="险种">
            <el-option
              v-for="item in flagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="推送状态">
          <el-select v-model="statusList" multiple placeholder="推送状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="经纪公司">
          <el-select v-model="brokerList" multiple placeholder="经纪公司">
            <el-option
              v-for="item in brokerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="推送时间">
              <template>
                <div class="block">
<!--                  <span class="demonstration">推送时间</span>-->
                  <el-date-picker
                    v-model="dateRange"
                    format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                  </el-date-picker>
                </div>
              </template>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="getProposalList()">查询</el-button>
          <el-button @click="resetQueryForm()">重置</el-button>
        </el-form-item>
      </el-form>



      <!-- 表格区域 -->
      <el-table
        :data="proposalList"
        border
        stripe
        style="width: 100%">
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column
          prop="infoNum"
          label="保单号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="brokerName"
          label="经纪公司名称">
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="推送时间">
        </el-table-column>
        <el-table-column
          prop="flag"
          label="险种">
          <template slot-scope="scope">
            <span>{{scope.row.flag== 1 ? '财产险' :scope.row.flag== 2 ? '人身险':'车险'}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          label="推送状态">-->
<!--          &lt;!&ndash; 让这一行的开关，把状态绑定到 这一行数据的 mg_state 上 &ndash;&gt;-->
<!--          &lt;!&ndash; <el-switch-->
<!--            v-model="scope.row.mg_state"-->
<!--            @change="(newState) => {switchChanged(newState, scope.row.id)}"-->
<!--            slot-scope="scope">-->
<!--          </el-switch> &ndash;&gt;-->
<!--          <el-switch-->
<!--            v-model="scope.row.state"-->
<!--            @change="switchChanged2(scope.row.state, scope.row.infoNum)"-->
<!--            slot-scope="scope">-->
<!--          </el-switch>-->
<!--        </el-table-column>-->
        <el-table-column
          prop="status"
          label="推送状态">
          <template slot-scope="scope">
            <span>{{scope.row.status== -1 ? '数据有误' :scope.row.status== 0 ? '未推送':scope.row.status== 1 ? '推送中':scope.row.status== 2 ? '推送失败':"推送成功"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="185"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 编辑用户的对话框 -->
    <el-dialog
      title="修改保单信息"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClosed">
      <!-- 编辑用户的表单 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
        <el-form-item label="保单号" prop="infoNum">
          <el-input v-model="editForm.infoNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="经纪公司" prop="brokerName">
          <el-input v-model="editForm.brokerName" disabled></el-input>
        </el-form-item>

        <el-form-item label="保险起始日期" prop="insureStartDate">
          <el-input v-model="editForm.insureStartDate" disabled></el-input>
        </el-form-item>

        <el-form-item label="保险到期日期" prop="insureEndDate">
          <el-input v-model="editForm.insureEndDate" disabled></el-input>
        </el-form-item>

        <el-form-item label="保险保额" prop="allFee">
          <el-input v-model="editForm.allFee" disabled></el-input>
        </el-form-item>

        <el-form-item label="期数" prop="payNum">
          <el-input v-model="editForm.payNum" disabled></el-input>
        </el-form-item>

        <el-form-item label="保费" prop="insureFee">
          <el-input v-model="editForm.insureFee" disabled></el-input>
        </el-form-item>

        <el-form-item label="保险人数" prop="insurancenum">
          <el-input v-model="editForm.insurancenum" disabled></el-input>
        </el-form-item>

        <el-form-item label="工程名称" prop="insureProjectName">
          <el-input v-model="editForm.insureProjectName" disabled></el-input>
        </el-form-item>
        <el-form-item label="临时份额人数" prop="cedantAcceptShare">
          <el-input v-model="editForm.cedantAcceptShare" disabled></el-input>
        </el-form-item>
        <el-form-item label="再报手续费" prop="cedantAcceptFee">
          <el-input v-model="editForm.cedantAcceptFee" disabled></el-input>
        </el-form-item>
        <el-form-item label="缴费方式" prop="payMode">
          <el-input v-model="editForm.payMode" disabled></el-input>
        </el-form-item>
        <el-form-item label="投保日期" prop="buyDate">
          <el-input v-model="editForm.buyDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="缴费年期" prop="payYear">
          <el-input v-model="editForm.payYear" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="proName">
          <el-input v-model="editForm.proName" disabled></el-input>
        </el-form-item>

        <el-form-item label="险种 " prop="flag">
          <el-radio-group v-model="editForm.flag" disabled>
            <el-radio-button label="1" >财产险</el-radio-button>
            <el-radio-button label="2" >人身险</el-radio-button>
            <el-radio-button label="3" >车险</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="推送时间" prop="startTime">
          <el-input v-model="editForm.startTime"></el-input>
        </el-form-item>

        <el-form-item label="推送状态 " prop="status">
          <el-radio-group v-model="editForm.status">
            <el-radio-button label="-1" >数据有误</el-radio-button>
            <el-radio-button label="0" >未推送</el-radio-button>
            <el-radio-button label="1" >推送中</el-radio-button>
            <el-radio-button label="2" >推送失败</el-radio-button>
            <el-radio-button label="3" >推送成功</el-radio-button>
          </el-radio-group>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editProposal">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import mix from './ProposalInfo-mixins.js'
// import Moment from 'moment'
export default {
  mixins: [mix]
}
</script>

<style lang="less" scoped>
.red {
  color: red;
}

.green {
  color: lightseagreen;
}

.zk-table {
  margin-top: 15px;
}

.el-cascader {
  width: 100%;
}
</style>
